<template>
  <div class="expressDelivery-item">
    <div class="expressDelivery-head">
      <h3>寄方信息</h3>
      <div class="btn" v-if="isEdit">
        <el-link icon="Location" type="primary" @click="() => {
          pup.state = true
          getAddresss()
        }">地址管理</el-link>
      </div>
    </div>
    <div class="expressDelivery-main">
      <dl>
        <dt>公司名称</dt>
        <dd>
          {{ data.companyName || '--' }}
        </dd>
      </dl>
      <dl>
        <dt>寄方信息</dt>
        <dd class="list-r-8">
          <span>{{ data.senderName || '--' }}</span>
          <span>{{ data.senderTelephone || '--' }}</span>
        </dd>
      </dl>
      <dl>
        <dt>详细地址</dt>
        <dd>
          {{ data.address || '--' }}
        </dd>
      </dl>
    </div>
    <SelectCom :pup="pup" :table="pup.table" :isShowBtn="true" @selectBtn="selectBtn" @searchBtn="getAddresss">
      <template #select_operationBtn="{ row }">
        <el-link type="primary" @click="() => {
          pupAdd.state = true
          pupAdd.form = JSON.parse(JSON.stringify(row))
        }">编辑</el-link>
      </template>
    </SelectCom>
    <ElPupFormBox :pup="pupAdd">
      <template #default="{ form }">
        <ElFormItemBox label="公司名称" prop="companyName" isRules>
          <ElInputBox :data="form" dataName="companyName" />
        </ElFormItemBox>
        <ElFormItemBox label="姓名" prop="senderName" isRules>
          <ElInputBox :data="form" dataName="senderName" />
        </ElFormItemBox>
        <ElFormItemBox label="电话" prop="senderTelephone" isRules rulesType="phone">
          <ElInputBox :data="form" dataName="senderTelephone" />
        </ElFormItemBox>
        <ElFormItemBox label="详细地址" prop="address" isRules>
          <ElInputBox :data="form" dataName="address" placeholder="详细地址" type="textarea" />
        </ElFormItemBox>
      </template>
    </ElPupFormBox>
  </div>
</template>
<script setup lang="ts">
import { useListComponent } from '../pageTs.ts'; // 引入逻辑
const { dataInfo, options } = useListComponent();
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    isEdit?: any;
  }>(),
  {

  },
);
watch(() => props.data?.customerCode, (newVal, oldVal) => {
  nextTick(() => {
    getAddresss()
  })
});
const pup: any = reactive({
  state: false,
  typeName: 0,
  title: `寄方地址`,
  number: 0,
  table: {
    loading: false,
    title: '寄方地址列表',
    tbody: [],
    thead: [
      {
        label: '公司名称',
        prop: 'companyName',
        align: 'left',
        width: 320,
      },
      {
        label: '姓名',
        prop: 'senderName',
        align: 'left',
        width: 120,
      },
      {
        label: '电话',
        prop: 'senderTelephone',
        align: 'center',
        width: 180,
      },
      {
        label: '详细地址',
        prop: 'address',
        align: 'left',
        width: null,
      },
      {
        label: '操作',
        prop: 'operationBtn',
        align: 'center',
        width: 100,
      },
    ],
  }
});
const pupAdd: any = reactive({
  state: false,
  typeName: 0,
  title: `编辑地址`,
  width: 600,
  height: 'auto',
  form: {
    senderInformationID: 0, // 发件人信息ID
    senderInformationCode: "", // 唯一编码
    companyName: "", // 公司名称
    customerCode: "", // 客户编号
    senderName: "", // 姓名
    senderTelephone: "", // 电话
    provinceCode: "", // 省编码
    cityCode: "", // 市编码
    areaCode: "", // 区县编码
    address: "" // 详细地址
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        pup.loading = true
        proxy.$api.OrderBusniess.UpdateSenderInformation(pup.form)
          .then((res: any) => {
            proxy.$message('保存成功');
            pup.state = false
            getAddresss()
          }).catch(() => {
            pup.loading = false
          })

      }
    }
  ]
});
const getAddresss = () => {
  pup.table.loading = true
  proxy.$api.OrderBusniess.GetSenderInformation({
    queryBy: 0,
    queryValue: props.data.customerCode,
  })
    .then((res: any) => {
      pup.table.tbody = res
      pup.table.loading = false
      if (!!!props.data.receiverName) {
        if (res.length > 0) {
          selectBtn(res)
        } else {
          pupAdd.state = true
        }
      }
    })
    .catch(() => {

    });
}
const selectBtn = (arr: any) => {
  const _row = arr[0] || {}
  const _form = props.data
  _form.companyName = _row.companyName//公司名称
  _form.senderName = _row.senderName//姓名
  _form.senderTelephone = _row.senderTelephone//电话
  _form.provinceCode = _row.provinceCode//省编码
  _form.cityCode = _row.cityCode//市编码
  _form.areaCode = _row.areaCode//区编码
  _form.address = _row.address//详细地址
}
onMounted(() => {
  getAddresss()
});
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
